<template>
	<a-dropdown
		v-model="show"
		:trigger="['click']"
		placement="bottomLeft"
		overlayClassName="box-dropdown"
	>
		<a-button class="width">
			<i class="word">{{ item ? item.eventAlias : '任意事件' }}</i>
			<a-icon type="caret-down" class="iconfont" />
		</a-button>

		<template slot="overlay" @click="handleVisible">
			<div class="box-list" v-if="listData">
				<a-input-search @search="onSearch" @change="handleChange" placeholder="请输入搜索" />
				<div class="box-menu" ref="elementHeight">
					<div class="group" v-for="(item, eventkey) in listData" :key="eventkey">
						<h3 class="title">
							<span>{{ item.groupName }}</span>
						</h3>
						<a-menu slot="overlay" @click="changeEvent($event, eventkey)">
							<a-menu-item
								v-for="obj in item.events"
								:key="obj.eventCode"
								:value="obj.eventCode"
								:title="obj.eventAlias"
							>
								{{ obj.eventAlias }}
								<a-icon type="check" class="check" />
							</a-menu-item>
						</a-menu>
					</div>
				</div>
			</div>
		</template>
	</a-dropdown>
</template>

<script lang="ts">
import { Component, Prop, Watch, Emit, Vue } from 'vue-property-decorator'
import { EventsListType, FieldsType } from '../type'
import request from '@/utils/request'
import _ from 'lodash'

@Component({
	name: 'Indicators',
	components: {}
})
export default class extends Vue {
	@Prop() projectId!: number
	@Prop() item!: FieldsType
	@Prop() itemKey!: number

	private lists: EventsListType[] = []
	private listData: EventsListType[] = []
	private show = false

	mounted(): void {
		this.getIndicatorData()
	}

	private handleVisible() {
		this.show = true
	}
	// 搜索
	private onSearch(value: string) {
		if (!_.isEmpty(value)) {
			let searchWord = value?.trim()
			let result: any = []
			const data = _.cloneDeep(this.lists)
			const searchData = data.map(obj => {
				const { groupName, events } = obj
				const regExp = new RegExp(searchWord, 'i')
				result = events.filter(item => {
					return regExp.test(item?.eventCode) || regExp.test(item.eventAlias)
				})
				return { events: result, groupName }
			})
			this.listData = _.cloneDeep(searchData)
		}
	}
	// 搜索
	private handleChange(e: any) {
		const { value } = e.target
		if (value === '') {
			this.listData = this.lists
		}
	}

	@Emit('changeEvent')
	private changeEvent(e: any, eventkey: number) {
		return { e, eventkey, itemKey: this.itemKey }
	}
	// 获取指数下拉内容
	@Watch('projectId')
	private getIndicatorData(): void {
		request('/reportservice/event/eventGroups', {
			method: 'GET',
			data: {
				projectId: this.projectId
			}
		}).then(({ data }) => {
			this.lists = data
			this.listData = this.lists
			// console.log('指数下拉 data: ', data)
		})
	}
}
</script>

<style lang="scss" scoped>
.width {
	width: 96px;
}
.box-list {
	width: 312px;
	height: 260px;
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14);
	box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
	background: #fff;
	overflow-y: scroll;
	.box-menu {
		height: 205px;
		overflow-y: scroll;
		margin-top: 10px;
		position: relative;
		.ant-menu {
			.ant-menu-item {
				.check {
					display: none;
				}
				&:hover {
					color: #2085ef;
					background: rgba(45, 140, 240, 0.06);
				}
				&.ant-menu-item-selected {
					color: #2085ef;
					.check {
						display: inline-block;
						position: absolute;
						top: 12px;
						right: 10px;
					}
				}
			}
		}
	}
	.group {
		.title {
			line-height: 30px;
			font-size: 14px;
			padding-left: 10px;
			margin-top: 10px;
			display: flex;
			align-items: center;
			flex-direction: row;
			&::before {
				display: inline-block;
				content: '';
				height: 12px;
				width: 3px;
				margin-right: 10px;
				background: #2185f0;
			}
			&::after {
				display: inline-block;
				content: '';
				height: 1px;
				flex-grow: 1;
				margin-left: 8px;
				background: #e9f0f7;
			}
		}
		.ant-input-affix-wrapper {
			float: right;
		}
		span.highlight {
			color: #f00;
		}
	}
}
.box-dropdown {
	background: #fff;
}
</style>
